<template>
	<div id="view-search">
		<BaseSearch searchQuery="key" @search="toSearch"></BaseSearch>
		正在快速施工中...
		<div ref="resultsElement" class="results"></div>
	</div>
</template>

<script>
	
	import { defineComponent } from "vue";
	
	export default defineComponent({
		name: 'SearchView'
	})
	
</script>

<script setup>
	
	import { nextTick, ref, reactive } from "vue";
	import BaseSearch from '@/components/base/search';
	import { searchEntries } from '@/api/services/search';
	
	const resultsElement = ref();
	
	const searchKey = ref();
	const resultsSet = reactive({
		list: [],
		loading: false,
		pageSize: 8,
		pageNum: 1,
		total: 0
	})
	
	function toSearch(value) {
		if (!value) return;
		resultsSet.loading = true;
		searchEntries({
			searchKey: value,
			pageSize: resultsSet.pageSize,
			pageNum: resultsSet.pageNum
		}).then(res => {
			const { total, list } = res;
			resultsSet.total = total;
			resultsSet.list = list;
		}).finally(() => {
			resultsSet.loading = false;
		})
	}
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/define/index.scss';
	@import '@/theme/material/media.scss';
	
	#view-search {
		@include viewLayout;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
		@include mediaSm {
			padding-top: 50px;
			padding-bottom: 30px;
		}
		:deep(.search) {
			width: min(100%, 600px);
		}
	}
	
</style>